/** * Create by mzq * Description: 左侧用户统计 * Date: 2024/9/13 10:17 * Update: 2024/9/13 10:17 */
<template>
  <div class="bg">
    <div class="title flex justify-center">用户统计</div>

    <div class="flex pl-[0.0417rem] pr-[0.0417rem]">
      <div class="w-full mr-[0.026rem]">
        <BlackBorder title="每周新增服务数量">
          <template #content>
            <My3DBar :reqData="reqData"></My3DBar>
          </template>
        </BlackBorder>
      </div>
      <div class="w-full">
        <BlackBorder title="每月新增服务数量">
          <template #content>
            <MonthlyNewQuantity :data="reqData2"></MonthlyNewQuantity>
          </template>
        </BlackBorder>
      </div>
    </div>
  </div>
</template>
<script setup>
import BlackBorder from '@/views/components/BlackBorder.vue'
// 每周新增服务数量echarts
import My3DBar from '@/views/components/Left/My3DBar.vue'
// 每月新增服务数量echarts
import MonthlyNewQuantity from '@/views/components/Left/MonthlyNewQuantity.vue'
import { ref, watch } from 'vue'

let reqData = ref()

let reqData2 = ref()

const defineProps = defineProps({
  data: Object,
  UserDeviceInfoList: Object
})

watch(
  () => defineProps.data,
  (val) => {
    reqData.value = val
  }
)

watch(
  () => defineProps.UserDeviceInfoList,
  (val) => {
    reqData2.value = val
  }
)
</script>
<style scoped lang="scss">
.bg {
  width: 2.2604rem /* 434/192 */;
  height: 1.28125rem /* 246/192 */;
  background: url('@/image/bg2.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 0.03125rem /* 6/192 */;

  .title {
    font-family: 'alimamashuheiti';
    color: #4adde4;
    font-size: 0.0729rem /* 14/192 */;
    margin-top: 0.0208rem /* 4/192 */;
    margin-bottom: 0.0625rem /* 12/192 */;
  }
}
</style>
